﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<!-- Advanced Tables -->
						<div class="panel panel-default">
							<div class="panel-heading">设备信息列表</div>
							<div class="panel-body">
							  	<form class="form-horizontal">
							  		<div class="form-group">
							  			<label for="vehicleLicense" class="col-md-2 control-label">设备标识</label>
							  			<div class="col-md-2">
							  				<input type="text" class="form-control" id="deviceSNSearch" placeholder="设备标识">
							  			</div>
							  			<label for="personName" class="col-md-2 control-label">车牌号</label>
                                        <div class="col-md-2">
	                                        <input type="text" class="form-control" id="vehicleLicenseSearch" placeholder="车牌号">
                                        </div>
                                        <div class="col-md-2">
                                        <a type="search" onclick="load(1)" class="btn btn-primary">搜索</a>
                                        </div>
							  		</div>
                                </form>
                                  
                                <div id="toolbar" class="btn-group">
	                    			<button id="btn_add" type="button" class="btn btn-default" onclick="addDevice()">
	                    		    		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	                    			</button>
                    			</div>
                                
                                <div style="height:20px"></div>
								<div class="table-responsive">
									<table class="table table-striped table-bordered table-hover"
										id="dataTables-example">
										<thead>
											<tr>
												<th>序号</th>
												<th>设备标识</th>
												<th>车牌号</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody id="tbody">
										</tbody>
									</table>
									<div style="float:right" id="page" class="tr"></div>
								</div>

							</div>
						</div>
						<!--End Advanced Tables -->
					</div>
				</div>
			</div>
		</div>

	<div class="modal fade" id="modal-default">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body">
					<form id="myForm" class="form-horizontal">
						<div class="form-group">
							<label for="unitName" class="col-md-3 control-label">设备标识</label>
							<div class="col-md-6">
								<input type="text" class="form-control" id="deviceSN" name="deviceSN">
							</div>
						</div>
						<div class="form-group">
							<label for="managerName" class="col-md-3 control-label">车牌号</label>
							<div class="col-md-6">
								<input type="text" class="form-control" id="vehicleLicense" name="vehicleLicense">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-left" id="sub">提交</button>
					<button type="button" class="btn btn-default pull-left"
						data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>	

<script>
$(function(){
	load(1)
})
function addDevice(){
	$("#myForm")[0].reset();
	$("label.error").remove();
	$(".modal-title").html("设备信息添加");
	$('#modal-default').modal('show');
	$("#sub").unbind("click");
	$('#sub').show();
	$('#sub').on("click",function(){
		add();
	})
}
function add(){
	if(valContent()){
		$.ajax({
            type: "POST",
            url: "<%=path%>/addDeviceInfo",
            data: $("#myForm").serialize(),
            beforeSend:function(){
            	$("#sub").unbind("click");
            },
            success: function(data,status,xhr){
                if(data.isSuccess==1){
					swal({ 
						  title: "提交成功", 
						  text: "添加成功", 
						  type: "success",
						},
						function(){
							$('#modal-default').modal('hide');
							load(1);
						});
				}else{
					$('#sub').on("click",function(){
						add();
					})
					swal("提交失败", data.errMsg, "error");
				}
            },
            error: function (textStatus){
            	swal("提交失败", "服务器异常", "error");
            }
		});
	}
}
function valContent(){
    return $('#myForm').validate({
        rules: {
        	deviceSN: {
                required: true
            },
            vehicleLicense: {
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element.text('OK!').addClass('valid')
                .closest('.form-group').removeClass('error').addClass('success');
        }
    }).form();
}

function delDevice(vehicleInfoId){
	swal({ 
		  title: "确定删除吗？", 
		  type: "warning",
		  showCancelButton: true, 
		  confirmButtonColor: "#DD6B55",
		  confirmButtonText: "确定删除！", 
		  cancelButtonText: "取消删除！",
		  closeOnConfirm: false, 
		  closeOnCancel: true
		},
		function(isConfirm){ 
		    if(isConfirm){
		    	$.ajax({
    			url:"<%=path%>/delDeviceInfo",
    			type:'post',
    			data:{vehicleInfoId:vehicleInfoId},
    			success:function(data,status,xhr){
    				if(data.isSuccess==1){
    					swal({ 
    						  title: "提交成功", 
    						  text: "删除成功！", 
    						  type: "success",
    						},
    						function(){
    							load(1);
    						});
    				}else{
    					swal("提交失败", data.errMsg, "error");
    				}
    			}
    		})
		    }
		});
}

function load(curr) {
	var pageSize =30; //每页出现的数量
    $.ajax({
    	url: "<%=path%>/getDeviceInfoPage",
        timeout: 300000,
        dataType: "json",
        type: "post",
        data: {
        	"curr": curr, 
        	"pageSize": pageSize,
        	"deviceSN":$("#deviceSNSearch").val(),
        	"vehicleLicense":$("#vehicleLicenseSearch").val()
        },
        success: function (data) {
            var html = "";
            $.each(data.list, function (i, item) {
            var id=item.vehicleInfoId	
             var str = "";
	            str += "&nbsp;&nbsp;&nbsp;&nbsp;";
	            str += "<a href='javascript:;' class='fa fa-trash-o' onclick=\"delDevice('" + id + "')\" title='删除'>删除</a>";

            	var n = i+1;
                html += " <tr> " +
	                        " <td>" + n + "</td> " +
	                        " <td>" + item.deviceSN + "</td> " +
	                        " <td>" + item.vehicleLicense + "</td> " +
	                        " <td>" +str+ "</td> " +
	                       
                        " </tr>";
            })
            $("#tbody").html(html);
            laypage({
                cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                pages: Math.ceil(data.totalCount / 30),  //通过后台拿到的总页数
                skin: "#49afcd",
                curr: curr || 1, //当前页
                jump: function (obj, first) { //触发分页后的回调
                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                        curr = obj.curr;
                        load(curr);
                    }
                }
            });

        }
    })
}


</script>
